<template>
  <div class="box">
    <el-row type="flex" class="row1">
      <el-col :span="6" v-for="(v, i) in data" :key="i">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row2">
      <el-col :span="12"><div class="grid-content bg-purple">5</div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple">6</div></el-col>
    </el-row>
  </div>
</template>
<script>
// import * as echarts from "echarts";
export default {
  data() {
    return {
      data: [
        { text: "用户", num: 29 },
        { text: "商品", num: 918 },
        { text: "订单", num: 29 },
        { text: "销售", num: 2075 },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.box {
  .el-row {
    margin: 0;
    justify-content: space-between;
  }
  .row1 {
    .el-col:first-child {
      background-color: #5470c6;
    }
    .el-col:nth-child(2) {
      background-color: #9a60b4;
    }
    .el-col:nth-child(3) {
      background-color: #3ba272;
    }
    .el-col:last-child {
      background-color: #fc8452;
    }
    .el-col {
      margin: -5px 10px 10px 10px;
      height: 115px;
      border-radius: 5px;
    }
  }
  .row2 > .el-col {
    border: 1px solid red;
    margin: 10px;
    height: 540px;
    box-shadow: 0 0 12px #ccc;
    padding: 20px;
  }
}
</style>